<template>
  <div class="container">
    <Navbar title='会员中心'></Navbar>
    <div class="user">
      为账户<span> {{userInfo.username}} </span>购买会员
    </div>
    <van-cell>
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <span class="custom-title">会员特权</span>
      </template>
      <template #right-icon>
        <div class="vipExplain"
             @click="$router.push('/vipcard/vipDescription')">
          <span>会员说明</span>
          <van-icon name="arrow" />
        </div>
      </template>
    </van-cell>
    <van-cell>
      <div class="vipPrivilege">
        <div class="vipimg">
          <img src="@/assets/images/sheng.jpg">
        </div>
        <div class="vipdesc">
          <h4>减免配送费</h4>
          <span>每月减免30单，每日可减免3单，每单最高减4元</span>
          <span>蜂鸟专送专享</span>
        </div>
      </div>
    </van-cell>
    <van-cell>
      <div class="vipPrivilege">
        <div class="vipimg">
          <img src="@/assets/images/kuai.jpg">
        </div>
        <div class="vipdesc">
          <h4>减免配送费</h4>
          <span>每月减免30单，每日可减免3单，每单最高减4元</span>
          <span>蜂鸟专送专享</span>
        </div>
      </div>
    </van-cell>
    <van-cell class="open-vip"
              title="开通会员" />
    <van-cell class="buy-vip">
      <template #title>
        <span class="custom-title">1个月</span> <span style="color:#ff6600; font-weight: 700;">￥20</span>
      </template>
      <template #default>
        <van-button plain
                    size="small"
                    @click="$router.push('/confirmOrder/payment')">购买</van-button>
      </template>
    </van-cell>
    <!-- 兑换会员 -->
    <van-cell class="exchange-vip">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <span class="custom-title">兑换会员</span>
      </template>
      <template #right-icon>
        <div class="vipExplain"
             @click="$router.push('/vipcard/useCart')">
          <span>使用卡号卡密</span>
          <van-icon name="arrow" />
        </div>
      </template>
    </van-cell>
    <!-- 购买记录 -->
    <van-cell>
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <span class="custom-title">购买记录</span>
      </template>
      <template #right-icon>
        <div class="vipExplain">
          <span>开发票</span>
          <van-icon name="arrow" />
        </div>
      </template>
    </van-cell>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {}
  },
  created () {
    console.log(this.userInfo);
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
  },
}
</script>

<style lang="less" scoped>
.container {
  .user {
    height: 25px;
    padding: 10px 20px;
    span {
      color: #000;
      font-weight: 700;
    }
  }
  .custom-title {
    color: #000;
    font-size: 16px;
  }
  .vipExplain {
    span {
      color: #ccc;
    }
    .van-icon {
      color: #ccc;
      margin-left: 2px;
    }
  }
  .vipPrivilege {
    height: 80px;
    display: flex;
    .vipimg {
      img {
        height: 80%;
      }
    }
    .vipdesc {
      h4 {
        display: block;
        margin: 0;
        padding: 0;
        font-size: 16px;
      }
      margin-left: 20px;
    }
  }
  .open-vip {
    margin-top: 12px;
  }
  .buy-vip {
    .van-button {
      width: 60px;
      height: 30px;
      border-radius: 5px;
      border: 1px solid #ff6600;
      /deep/ .van-button__text {
        color: #ff6600;
        font-size: 14px;
      }
    }
  }
  .exchange-vip {
    margin: 12px 0;
  }
}
</style>
